<!-- 文章详情页 -->
<template>
  <div class="article-detail">
    <div class="container">
      <div class="aiEditot" ref="divRef">
        <div class="aie-container">
          <div class="aie-header-panel"></div>
          <div class="aie-main">
            <div class="aie-directory-content">
              <div class="info">
                <div class="avatar">
                  <el-avatar
                    :src="articleInfo.avatar"
                    style="width: 70px; height: 70px"
                  />
                </div>
                <div class="count-contain">
                  <div class="article-count">
                    {{ articleInfo.articleNumber }}
                    <span>文章</span>
                  </div>
                  <div class="view-count">
                    {{ articleInfo.views }}
                    <span>阅读</span>
                  </div>
                  <div class="fens-count">
                    0
                    <span>粉丝</span>
                  </div>
                </div>
                <div class="handler">
                  <el-button
                    type="primary"
                    class="btn"
                    @click="ElMessage.info('敬请期待')"
                    >关注</el-button
                  >
                  <el-button
                    type="primary"
                    plain
                    class="btn"
                    @click="ElMessage.info('敬请期待')"
                    >私信</el-button
                  >
                </div>
              </div>
              <div class="aie-directory" v-if="isShowOutLine">
                <h5
                  style="
                    padding: 10px;
                    box-sizing: border-box;
                    text-align: center;
                    font-size: 18px;
                  "
                >
                  目录
                </h5>
                <div
                  id="outline"
                  style="
                    max-height: 300px;
                    min-height: 300px;
                    overflow: scroll;
                    overflow-x: hidden;
                    color: #000;
                  "
                ></div>
              </div>
            </div>
            <div class="aie-container-panel">
              <div class="content">
                <h1>{{ articleInfo.title }}</h1>
                <div class="content-info">
                  <span>{{ articleInfo.nickName }}</span>
                  <span class="time">{{ articleInfo.createdTime }}</span>
                  <span>{{ articleInfo.categoryName }}</span>
                </div>
              </div>
              <div class="aie-container-main" style="margin-top: 50px"></div>
            </div>
            <div class="article-suspended-panel">
              <ul>
                <el-badge
                  :value="articleInfo.likeCount"
                  class="item"
                  type="info"
                  :hidden="!articleInfo.likeCount"
                >
                  <li @click="originalHandlerLike(articleInfo.id)">
                    <svg
                      t="1713157766682"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="4298"
                      width="20"
                      height="20"
                      v-if="!articleInfo.isLike"
                    >
                      <path
                        d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z"
                        p-id="4299"
                        fill="#8a8a8a"
                      ></path>
                    </svg>
                    <svg
                      t="1713157766682"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="4298"
                      width="20"
                      height="20"
                      v-else
                    >
                      <path
                        d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z"
                        p-id="4299"
                        fill="#1296db"
                      ></path>
                    </svg>
                    <!-- <svg
                      t="1713157766682"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      width="20"
                      height="20"
                      v-else
                    >
                      <path
                        d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z"
                        p-id="4299"
                        fill="#1296db"
                      ></path>
                    </svg> -->
                  </li>
                </el-badge>
                <el-badge
                  :value="articleInfo.commentCount"
                  class="item"
                  type="info"
                  :hidden="!articleInfo.commentCount"
                >
                  <li @click="loadComments">
                    <svg
                      t="1712742549013"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="6421"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M847.36 107.52h-665.6c-69.12 0-125.44 56.32-125.44 125.44v401.92c0 69.12 56.32 125.44 125.44 125.44h38.4l15.36 181.76 158.72-181.76h453.12c69.12 0 125.44-56.32 125.44-125.44V232.96c0-69.12-56.32-125.44-125.44-125.44z m-563.2 376.32c-33.28 0-61.44-28.16-61.44-61.44 0-33.28 28.16-61.44 61.44-61.44 33.28 0 61.44 28.16 61.44 61.44 2.56 33.28-25.6 61.44-61.44 61.44z m230.4 0c-33.28 0-61.44-28.16-61.44-61.44 0-33.28 28.16-61.44 61.44-61.44 33.28 0 61.44 28.16 61.44 61.44 0 33.28-28.16 61.44-61.44 61.44z m227.84 0c-33.28 0-61.44-28.16-61.44-61.44 0-33.28 28.16-61.44 61.44-61.44 33.28 0 61.44 28.16 61.44 61.44 2.56 33.28-25.6 61.44-61.44 61.44z"
                        fill="#8a8a8a"
                        p-id="6422"
                      ></path>
                    </svg>
                  </li>
                </el-badge>
                <li @click="ElMessage.info('敬请期待')">
                  <svg
                    t="1712742592686"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="7460"
                    width="22"
                    height="22"
                  >
                    <path
                      d="M892.38645 417.231613c-3.651157-11.266601-13.45136-19.506263-25.186635-21.223371l-229.084489-33.269731-102.46365-207.580732c-10.517541-21.317515-45.441958-21.317515-55.960523 0l-102.46365 207.580732-229.084489 33.269731c-11.735275 1.717108-21.503756 9.925047-25.186635 21.223371-3.651157 11.329023-0.624217 23.720238 7.895831 31.990598l165.78993 161.607678-39.138392 228.148164c-1.997494 11.703553 2.808976 23.563672 12.390191 30.524201 9.643638 7.021927 22.37766 7.927553 32.895201 2.372024l204.895577-107.738793 204.864878 107.707071c4.556783 2.403746 9.582239 3.589758 14.544251 3.589758 6.460132 0 12.889565-1.997494 18.351973-5.961782 9.612938-6.959505 14.419408-18.819624 12.390191-30.524201l-39.137369-228.148164 165.78993-161.607678C893.01169 440.920128 896.03863 428.560636 892.38645 417.231613z"
                      fill="#8a8a8a"
                      p-id="7461"
                    ></path>
                  </svg>
                </li>
                <li @click="ElMessage.info('敬请期待')">
                  <svg
                    t="1712742646804"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="8731"
                    width="20"
                    height="20"
                  >
                    <path
                      d="M11.906977 686.144703C11.906977 815.040274 116.401033 919.527686 245.282364 919.527686 336.61059 919.527686 415.644553 867.07512 453.998997 790.654166L678.775475 830.246531 678.69434 836.171752C678.69434 928.249761 753.334677 1002.872594 845.396182 1002.872594 937.453687 1002.872594 1012.093023 928.249761 1012.093023 836.171752 1012.093023 744.092767 937.453687 669.475911 845.396182 669.475911 778.632502 669.475911 721.072771 708.661581 694.439626 765.323431L475.158671 726.724775C477.472673 713.56004 478.661727 699.982586 478.661727 686.144703 478.661727 625.213488 455.296238 569.751719 417.078034 528.208991L619.848371 325.417817C638.146084 332.321744 657.974439 336.079229 678.69434 336.079229 770.756846 336.079229 845.396182 261.456372 845.396182 169.383388 845.396182 77.310404 770.756846 2.686547 678.69434 2.686547 586.637836 2.686547 511.9985 77.310404 511.9985 169.383388 511.9985 216.140133 531.256868 258.382062 562.251562 288.660361L365.047879 485.862876C330.029199 464.866614 289.08725 452.76572 245.282364 452.76572 116.401033 452.771721 11.906977 557.249131 11.906977 686.144703L11.906977 686.144703 11.906977 686.144703Z"
                      fill="#8a8a8a"
                      p-id="8732"
                    ></path>
                  </svg>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 登录遮罩层 -->
    <LoginDialog :close="handlerClose" v-if="isExist" />

    <!-- 评论抽屉 -->
    <el-drawer v-model="commentDrawer" title="评论区">
      <u-comment
        :config="config"
        @submit="submit"
        @like="like"
        upload
        trigger="click"
        @command="onCommand"
      >
      </u-comment>
    </el-drawer>
  </div>
</template>

<script setup>
import { AiEditor } from "aieditor";
import "aieditor/dist/style.css";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import {
  reqQueryDetail,
  reqDoLike,
  reqArticleComments,
  reqAddComment,
} from "@/api/article";
import useUserStore from "@/store/modules/user";
import LoginDialog from "@/components/LoginDialog.vue";
import emoji from "@/assets/emoji/emoji.js";
import { createObjectURL } from "undraw-ui";

const userStore = useUserStore();

const $route = useRoute();

const divRef = ref();

// 登录遮罩层是否显示
const isExist = ref(false);

// 评论抽屉是否显示
const commentDrawer = ref(false);

let aiEditor = null;
// 是否显示目录
const isShowOutLine = ref(true);
// 文章信息
const articleInfo = ref({});

onMounted(() => {
  getArticleInfo($route.query.id);
});

// 处理点赞
const originalHandlerLike = (id) => {
  if (!userStore.userName) {
    ElMessage.info("请先登录账号");
    isExist.value = true;
    return;
  }

  // 修改点赞状态
  articleInfo.value.isLike = !articleInfo.value.isLike;

  // 如果为点赞，则点赞数加1，反之-1
  if (articleInfo.value.isLike) {
    articleInfo.value.likeCount += 1;
    ElMessage.success("点赞成功");
  } else {
    articleInfo.value.likeCount -= 1;
    ElMessage.success("取消点赞");
  }

  reqDoLike(id);
};

// 获取文章信息
const getArticleInfo = (id) => {
  const entity = {
    id,
  };
  reqQueryDetail(entity).then((res) => {
    if (res.code == 200) {
      // 初始化编辑器
      aiEditor = new AiEditor({
        element: divRef.value,
        placeholder: "点击输入内容...",
        content: "",
        editable: false, // 是否可编辑
        toolbarKeys: [], // 不显示工具栏
        onCreated: (editor) => {
          updateOutLine(editor);
        },
        onChange: (editor) => {
          updateOutLine(editor);
        },
      });

      aiEditor.setContent(res.data.content);

      articleInfo.value = res.data;

      if (document.querySelector("#outline").childNodes.length <= 1) {
        isShowOutLine.value = false;
      }
      // console.log(document.querySelector(".aie-container").childNodes);

      // document.querySelector(".aie-container").lastChild.remove();

      // console.log(document.querySelector(".aie-container").childNodes);
    }
  });
};

// 更新目录
const updateOutLine = (editor) => {
  const outlineContainer = document.querySelector("#outline");
  while (outlineContainer?.firstChild) {
    outlineContainer.removeChild(outlineContainer.firstChild);
  }

  const outlines = editor.getOutline();
  for (let outline of outlines) {
    const child = document.createElement("div");
    child.classList.add(`aie-title${outline.level}`);
    child.style.marginLeft = `${14 * (outline.level - 1)}px`;
    child.innerHTML = `<a href="#${outline.id}">${outline.text}</a>`;
    child.addEventListener("click", (e) => {
      e.preventDefault();
      const el = editor.innerEditor.view.dom.querySelector(`#${outline.id}`);
      el.scrollIntoView({
        behavior: "smooth",
        block: "center",
        inline: "nearest",
      });
      setTimeout(() => {
        editor.focusPos(outline.pos + outline.size - 1);
      }, 1000);
    });
    outlineContainer?.appendChild(child);
  }
};

// 处理遮罩层关闭
const handlerClose = () => {
  isExist.value = false;
};

// ----------------- 评论组件 --------------

// 存放评论内容
const comments = ref(null);

// 评论区数据
const config = ref({
  user: {
    id: userStore["info"].id,
    username: userStore["info"].nickName,
    avatar: userStore["info"].avatar,
    // 评论id数组 建议:存储方式用户uid和评论id组成关系,根据用户uid来获取对应点赞评论id,然后加入到数组中返回
    likeIds: [0],
  },
  emoji: emoji,
  comments: [],
  total: 10,
  // showLikes: false,
});

// 打开遮罩层同时加载文章评论信息
const loadComments = () => {
  commentDrawer.value = true;

  reqArticleComments($route.query.id).then((res) => {
    // console.log(res);
    comments.value = res.data;
    config.value.comments = comments;
    config.value.comments.forEach((item) => {
      item.user.username = item.user.nickName;
      item.createTime = item.createdTime;
    });
    // config["user"].likeIds = res["likeList"];
  });
};

// 点赞按钮事件 将评论id返回后端判断是否点赞，然后在处理点赞状态
const like = (id, finish) => {
  console.log("点赞: " + id);

  // const data = {
  //   entityType: 1,
  //   entityId: id,
  // };

  setTimeout(() => {
    finish();
  }, 200);
};

// 提交评论事件
const submit = ({ content, parentId, files, finish, reply }) => {
  if (!userStore.userName) {
    ElMessage.info("请先登录账号");
    isExist.value = true;
    return;
  }

  let str =
    "提交评论:" +
    content +
    ";\t父id: " +
    parentId +
    ";\t图片:" +
    files +
    ";\t被回复评论:";
  console.log(str, reply);

  // /**
  //  * 上传文件后端返回图片访问地址，格式以'||'为分割; 如:  '/static/img/program.gif||/static/img/normal.webp'
  //  */
  let contentImg = files.map((e) => createObjectURL(e)).join("||");

  // console.log(contentImg);

  const comment = {
    parentId: parentId ? parentId : 0,
    uid: userStore["info"].id,
    address: "来自江苏",
    content: content,
    likes: 0,
    createTime: "1分钟前",
    contentImg:
      "https://gitee.com/undraw/undraw-ui/raw/master/public/docs/normal.webp",
    user: {
      username: config.value.user.username,
      avatar: config.value.user.avatar,
      level: 1,
    },
    reply: null,
  };

  const entity = {
    userId: userStore["info"].id,
    articleId: $route.query.id,
    content,
    parentId: parentId ? parentId : 0,
  };

  // console.log(entity);

  reqAddComment(entity).then((res) => {
    if (res.code == 200) {
      finish(comment);
      reqArticleComments($route.query.id).then((res) => {
        comments.value = res.data;
        config.value.comments = comments;
        config.value.comments.forEach((item) => {
          item.user.username = item.user.nickName;
        });
      });
      ElMessage.success("评论成功");
    } else if (res.code == 500) {
      ElMessage.error(res.data);
    } else {
      ElMessage.error("评论失败");
    }
  });
};
</script>

<style scoped lang="scss">
.article-detail {
  width: 100%;
  min-height: calc(100vh - 55px);
  background: url("@/assets/articleBg2.jpg");
  background-size: cover;
  padding: 20px;
  box-sizing: border-box;
  position: relative;

  .container {
    width: 68%;
    margin: 0 auto;
    box-sizing: border-box;
    .aiEditot {
      .aie-container {
        border: none !important;
        background-color: initial;
        position: relative;
        .aie-main {
          position: relative;
          display: flex;
          justify-content: space-around;

          .aie-directory-content {
            width: 26% !important;
            min-height: calc(100vh - 95px);

            .info {
              width: 100%;
              background-color: #fff;
              min-height: 150px;
              border-radius: 4px;
              box-sizing: border-box;
              padding: 20px;
              .avatar {
                width: 100%;
                display: flex;
                justify-content: center;
                cursor: pointer;
              }
              .count-contain {
                width: 100%;
                display: flex;
                justify-content: center;
                margin: 10px 0;
                div {
                  flex: 1;
                  flex-direction: column;
                  display: flex;
                  justify-content: center;
                  text-align: center;
                  cursor: pointer;
                  font-size: 18px;
                  color: #5b5b5b;
                  span {
                    font-size: 12px;
                    color: #999;
                    margin-top: 3px;
                    font-weight: 400;
                  }
                }
              }
              .handler {
                display: flex;
                justify-content: center;
                margin-top: 20px;
                .btn {
                  height: 30px;
                  padding: 0 20px;
                }
              }
            }
            .aie-directory {
              background-color: #fff;
              min-height: 400px;
              border-radius: 4px;
              position: sticky;
              top: 100px;
              max-height: 500px;
            }
            .aie-directory h5 {
              color: #000000c4;
              font-size: 16px;
              text-indent: 4px;
              line-height: 32px;
            }
            .aie-directory a:hover {
              cursor: pointer;
              background-color: #334d660f;
              border-radius: 4px;
            }

            .aie-title1 {
              font-size: 16px;
              font-weight: 500;
            }

            .aie-title2,
            .aie-title3,
            .aie-title4,
            .aie-title5,
            .aie-title6 {
              font-size: 14px;
            }
          }
          .aie-container-panel {
            .content {
              h1 {
                text-align: center;
              }
              .content-info {
                display: flex;
                font-size: 15px;
                .time {
                  color: #5b5b5b;
                }
                span {
                  margin: 0 10px;
                  cursor: pointer;
                }
                :first-child:hover {
                  color: #2834c1;
                }
              }
            }
            background-color: #fff;
            width: 65%;
            border-radius: 4px;
            border: 1px solid rgb(229 231 235);
            padding: 1rem;
            z-index: 99;
            box-sizing: border-box;
          }
        }
      }
    }

    .article-suspended-panel {
      ul {
        position: fixed;
        top: 100px;
        display: flex;
        flex-direction: column;
        li {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: rgb(255, 255, 255, 0.65);
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 10px 0;
          cursor: pointer;
          backdrop-filter: blur(10px);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.223);
        }
        li:hover .icon {
          color: rgb(80, 80, 80);
        }
      }
    }
  }
}
// ::-webkit-scrollbar-thumb {
//   border-radius: 8px;
//   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
//   background: #666666;
// }
// //鼠标移入样式
// ::-webkit-scrollbar-thumb:hover {
//   background: #333333;
// }
// ::-webkit-scrollbar-track {
//   border-radius: 8px;
//   background: #eeeeee;
// }
:deep(.el-badge__content) {
  transform: translate(70%, 40%);
}

:deep(.aie-content img) {
  width: 100% !important;
}

:deep(.el-overlay) {
  z-index: 99 !important;
}
</style>